<template>
	<view>
		<view class="user-vip">
			<view class="content">
				<view class="vip-swiper-container p-t-20">
					<swiper class="swiper" style="height: 360rpx" previous-margin="30rpx"
					 :current="currentIndex" @change="bindchange">
						<swiper-item v-for="(item, index) in couponList" :key="index">
							<view class="vip-card-item" :style="'background-image: url(' + item.background_image + ');'">
								<view class="flex row-between">
									<view class="flex grade white sm">
								      价值：￥{{item.value}}
									</view>
									<image class="grade-icon m-r-34 m-t-20" :src="item.image"></image>
								</view>
								<view class="flex row-between vip-name white">
									<view class="bold">{{item.name}}</view>
								</view>
								<view class="flex row-center m-l-30 m-r-30">
									<view class="vip-progress bg-white flex">
										<view class="vip-progress-bar" style="'width:100"></view>
									</view>
								</view>
								<view class="flex row-between m-t-10" style="padding: 0 30rpx">
									<view class="sm white" style="line-height: 36rpx">
										待使用：{{item.wait}}
									</view>							
										<view class="sm white" style="line-height: 36rpx">										
											已使用：{{item.use}} 
										</view>
									
									<view class="white m-b-20" @tap="getByOneCouponFun()"><u-icon color="#fff" size="80" name="/static/images/qrcode.png"></u-icon></view>
								</view>
								
								
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="vip-grade-rule ">
					<view class="title flex white">
						<view class="line br60"></view>
						<view class="xl m-l-20 bold">使用记录</view>
					</view>
					<view class="p-t-20"> 
						<view class="rule-content column lighter">
							<my-liquor-coupons :liquor="liquor_id" :i="currentIndex" :index="currentIndex"></my-liquor-coupons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup
		    v-model="showPopup"
		    mode="bottom"
		    border-radius="14"
		    :closeable="false"
		    :safe-area-inset-bottom="true"
		    mask-close-able
			height="40%"
		>
		    <view class="receive-qr">
		        <text class="xs lighter">请凭二维码取货</text>
		        <view
		            class="m-t-20 qr-container"
		            :class="{ 'qr-contain--die': 0 }"
		            ref="qr-image"
		        >
		            <tki-qrcode
		                v-if="showPopup"
		                ref="qrcode"
		                uni="px"
		                :val="pay_info.sn"
		                :size="130 * 2"
		                :showLoading="true"
		            />
		        </view>
		        <view class="m-t-30 lg black qr-code">{{pay_info.sn}}</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCouponSetList,
		getliquorCoupon,
		getByOneCoupon,
		refreshcoupon
	} from '@/api/liquor';

	export default {
		data() {
			return {
				userInfo: {},
				currentIndex: 0,
				levelList: [],
				couponList:[],
				growthRule: "",
				privilegeList: [],
				liquor_id:'1',
				showPopup:false,
				pay_info:""
			};
		},


		onLoad() {
			this.getLevelListFun();
		},


		methods: {
			bindchange(e) {
				let {
					current
				} = e.detail;
                console.log(this.couponList[current]['id'])
				this.currentIndex = current
				this.liquor_id = this.couponList[current]['id']
			},

			getLevelListFun() {
				getCouponSetList().then(res => {
					const {
						code,
						data
					} = res;
					if (code != 1) return;
					const {
						couponList,
						use,
						wait,
					} = data;
				
					let index = 0;
					this.couponList = couponList
					this.currentIndex = index
					this.liquor_id = this.couponList[index]['id'];
				});
			},
			
			async getByOneCouponFun(){
				 let { liquor_id , pay_info} = this;				 
				 if(pay_info){					 
					await  refreshcoupon(this.pay_info); 
				 }
			  // 
			  await	getByOneCoupon({liquor_id:liquor_id}).then(res=>{
					const {
						code,
						data
					} = res;
					if (code != 1) return;			
					  this.pay_info = res.data
					  this.showPopup = true;

				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
		// background-image: url(../../static/vip_liquor_bg.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		.user-vip {
			.content {
				.vip-card-item {
					height: 360rpx;
					width: 690rpx;
					position: relative;
					background-size: 100% 100%;

					.grade {
						line-height: 36rpx;
						background-color: rgba(0, 0, 0, 0.5);
						border-top-right-radius: 100rpx;
						border-bottom-right-radius: 100rpx;
						height: 50rpx;
						padding: 0 28rpx;
					}

					.user-grade {
						line-height: 36rpx;
						margin-left: 30rpx;
					}

					.grade-icon {
						width: 145rpx;
						height: 145rpx;
						border-radius: 100%;
					}

					.vip-name {
						padding: 10rpx 30rpx;
						font-size: 46rpx;
						text-align: center;
						align-items: flex-end;
						margin-bottom: 30rpx;
						margin-top: -20rpx;
					}

					.vip-progress {
						height: 8rpx;
						border-radius: 8rpx;
						width: 100%;
						overflow: hidden;
						.vip-progress-bar {
							background-color: #f8d07c;
							height: 100%;
						}
					}

				}

				.vip-grade-rule {
					margin: 24rpx 40rpx;
					background-color: #fff;

					.title {
						border-bottom: #3a3e4d 3px solid;
						color: #3a3e4d;
						.line {
							width: 8rpx;
							height: 34rpx;
							background-color: #f79c0c;
						}
					}
				}

				.vip-rights {
					margin: 24rpx 40rpx;

					.title {
						padding: 28rpx 0;

						.line {
							width: 8rpx;
							height: 34rpx;
							background-color: #f79c0c;
						}
					}

					.rights-item {
						width: 25%;
						padding-bottom: 30rpx;

						image {
							width: 82rpx;
							height: 82rpx;
						}
					}
				}

			}

		}
	}
	.receive-qr {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    min-height: 460rpx;
	}
	
	.qr-contain {
	    box-sizing: border-box;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 140px;
	    height: 140px;
	    padding: 8px;
	    border: 1px solid #CCCCCC;
	    border-radius: 5px;
	}
	.qr-container {
	    box-sizing: border-box;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 140px;
	    height: 140px;
	    padding: 8px;
	    // border: 1px solid #CCCCCC;
	    border-radius: 5px;
	}
	.qr-contain--die {
	    position: relative;
	}
	
	.qr-contain--die::before {
	    position: absolute;
	    z-index: 99;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    display: block;
	    content: '';
	    background-color: rgba(255, 255, 255, 0.5);
	}
	
	.qr-code {
	    padding: 8rpx 30rpx;
	    border-radius: 60px;
	    background-color: #f6f6f6;
	}
</style>
